<template>
  <div style="text-align: left">
    <a-button class="editable-add-btn" @click="showModal1">添加</a-button>
    <a-input-search placeholder="请输入名称关键字" style=" width: 200px" @search="onSearch" v-model="keyword"/>

    <br />
    <a-table bordered :data-source="list" :columns="columns"  rowKey='inventoryGoods' :pagination="paginationOpt">
      <template slot="name"> </template>
      <template slot="operation" slot-scope="text, record">
        <a @click="() => showModal2(record)">修改</a>
        <a-popconfirm
          v-if="list.length"
          title="确定删除?"
          @confirm="() => onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>

    <a-modal v-model="addVisible" title="添加" on-ok="handleAdd">
      <template slot="footer">
        <a-button key="back" @click="addVisible=false">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="handleAdd">
          提交
        </a-button>
      </template>
      <p>
        商品名称：<input type="text" v-model="obj.name"><br>
        商品简介：<input type="text" v-model="obj.description"><br>
        商品库存：<input type="text" v-model="obj.stock"><br>
        商品来源：<input type="text" v-model="obj.source"><br>
        商品编号：<input type="text" style="margin-left:30px"  v-model="obj.no"><br>
      </p>
    </a-modal>

    <a-modal v-model="editVisible" title="修改" on-ok="edit">
      <template slot="footer">
        <a-button key="back" @click="editVisible=false">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="edit">
          提交
        </a-button>
      </template>
      <p>
        商品名称：<input type="text" v-model="obj.name"><br>
        商品简介：<input type="text" v-model="obj.description"><br>
        商品库存：<input type="text" v-model="obj.stock"><br>
        商品编号：<input type="text" style="margin-left:30px"  v-model="obj.no"><br>
      </p>
    </a-modal>
    <div id="myChart" :style="{width: '600px', height: '300px', clear:'both',float:'left',top:'20px'}"></div>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'inventoryGoods',
        data: function () {
            return  {
                wareHouseUrl:this.baseURL+"inventoryGoods.ctl",
                logoutUrl:this.baseURL+"logout.ctl",
                list:[],
                obj:{},
                keyword:'',
                selectkey:'',
              chartsdata: [0, 0 ,0 ,0],
              chartseries: ['衣帽服饰','蔬菜水果','生活用品','厨房用品'],
                columns: [
                    {
                        title: '序号',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        },
                    },
                    {
                        title: '商品名称',
                        dataIndex: 'name',
                    },
                    {
                        title: '商品简介',
                        dataIndex: 'description'

                    },
                    {
                        title: '商品编号',
                        dataIndex: 'no'

                    },
                    {
                        title: '商品来源',
                        dataIndex: 'source'

                    },
                    {
                        title: '库存',
                        dataIndex: 'stock'

                    },
                    {
                        title: '操作',
                        scopedSlots: { customRender: 'operation' },
                    },
                ],
                addVisible:false,
                logoutVisible:false,
                editVisible:false,
                // 分页
                paginationOpt: {
                    defaultCurrent: 1, // 默认当前页数
                    defaultPageSize: 5, // 默认当前页显示数据的大小
                    total: 0, // 总数，必须先有
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: ["5", "10", "15", "20"],
                    showTotal: (total) => `共 ${total} 条`, // 显示总数
                    onShowSizeChange: (current, pageSize) => {
                        this.paginationOpt.defaultCurrent = 1;
                        this.paginationOpt.defaultPageSize = pageSize;
                        //this.searchCameraFrom(); //显示列表的接口名称
                    },
                    // 改变每页数量时更新显示
                    onChange: (current, size) => {
                        this.paginationOpt.defaultCurrent = current;
                        this.paginationOpt.defaultPageSize = size;
                        //this.searchCameraFrom();
                    },
                }
            }
        },
      mounted () { // mounted钩子函数是组件挂载后执行，时间上比created要晚
        this.getList()
        this.getSchoolList()// 获取树结构的初始化父节点数据
      },
        methods: {
          getList () {
            var _this = this
            axios.get(this.wareHouseUrl).then((res) => {
              _this.list = res.data
              // console(res.dat)
              _this.chartsdata = [0, 0, 0 ,0]
              _this.list.forEach(function (item, i) {
                _this.chartseries.forEach(function (o, i) {
                  if (item.description == o) {
                    _this.chartsdata[i]++
                  }
                })
              })
              this.drawLine()
            })
          },
          drawLine () {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: {
                text: '货物种类统计'
                // extAlign:'center'
              },
              tooltip: {}, // 鼠标悬浮时显示的提示框
              axisTick: { // 去除x坐标轴刻度线
                show: false
              },
              xAxis: {
                data: this.chartseries
              },
              yAxis: {},
              series: [{
                name: '类别',
                type: 'bar', // 图表类型，柱形、曲线、等
                itemStyle: {
                  color: 'rgba(212,109,0,1)' // 柱子颜色
                },
                data: this.chartsdata
              }]
            })
          },
            getSchoolList(){
                var arr = this;
                if(this.selectkey!='')
                    axios.get(this.wareHouseUrl+"?"+this.selectkey).then((response) => {//根据选中的节点改变教师对象列表
                        arr.list=response.data;
                    })
                else
                    axios.get(this.wareHouseUrl).then((response) => {
                        arr.list=response.data;
                    })
            },

      showModal1() {
this.addVisible = true;
this.obj={};
},

showModal2(obj) {
this.editVisible = true;
this.obj=obj;
},
edit:function (id){
axios.put(this.wareHouseUrl,this.obj).then((res)=>{
alert(res.data.message);
this.obj={}
});
this.editVisible=false;
this.getSchoolList();
},
onDelete(id){
axios.delete(this.wareHouseUrl+"?id="+id).then(res => { //这里后台有错，有专业数据的学院删不掉，也提示删除成功
alert(res.data.message);
this.getSchoolList();
})

},
handleAdd(){
axios.post(this.wareHouseUrl,this.obj).then((res)=>{
alert(res.data.message);
this.obj={}
})
this.addVisible=false;
this.getSchoolList();
},
           logout(){
                axios.get(this.logoutUrl).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                })
                this.logoutVisible=false;
               this.$router.push('/')
            },
            onSearch(){
var arr = this;
//需要后台对每一个字段做模糊查询
axios.get(this.wareHouseUrl+"?id="+this.keyword).then((response) => {
arr.list=response.data;
})
}
},
created(){
this.getSchoolList();
}
}

</script>

<style scoped>
table{
    margin-top:50px;
    width:90%;
}
tr{
    line-height: 40px;
}
td{border-bottom: solid 1px #eee;}

div p{ line-height: 50px;}
div p input {line-height: 28px;}

</style>
